<template>
	<view class="user_inviter_index">
		<view class="inviter_top"></view>
		<view class="w_block">
			<view class="qrcode">
				<image :src="info.qrcode || ''" mode="aspectFill" /></image>
			</view>
			<view class="btn" @click="saveHeadImgFile()">保存二维码</view>
		</view>
		<view class="inviter_users">
			<view class="title">- 我的邀请 -</view>
			<mescroll-body ref="mescrollRef" @up="upCallback" :down="downOption" :up="upOption">
				<view class="item" v-for="(v,k) in list" :key="k">
					<view class="avatar">
						<image :src="v.avatar || require('@/static/auth/default_avatars.png')" mode="aspectFit" ></image>
					</view>
					<view class="nickname">{{v.nickname||''}}</view>
					<view class="money">{{v.created_at_app||'-'}}</view>
				</view>
			</mescroll-body>
		</view>
		
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], 
		data() {
			return {
				params:{
					page:1,
					per_page:10,
				},
				info:{
					qrcode:'',
				},
				list:[],
				downOption:{
					use:false,
				},
				upOption:{
					textColor:'#fff'
				}
			};
		},
		onLoad() {
			this.get_qrcode();
		},
		methods:{
			get_qrcode(){
				let obj = {...this.$api.distributions}
				obj.url += '/link'
				this.$http(obj).then(res=>{
					if(res.code==200){
						this.info = res.data;
					}else{
						this.$toast(res.msg)
						// return this.$nav('',3);
					}
					// console.log(this.info.qrcode)
				})
			},
			get_user(){
				let obj = {...this.$api.distributions}
				obj.url += '/user'
				this.$http(obj).then(res=>{
					if(res.code==200){
						this.info = res.data;
					}else{
						this.$toast(res.msg)
						// return this.$nav('',3);
					}
					console.log(this.info.qrcode)
				})
			},
			upCallback(page){
				this.params.page = page.num; 
				this.params.per_page = page.size; 
				let obj = {...this.$api.distributions}
				obj.url += '/user'
				this.$http(obj,this.params).then(res=>{
					if(res.code == 200){
						if(this.params.page == 1){
							this.list = [];
						}
						this.list = this.list.concat(res.data.data||res.data); 
						this.mescroll.endBySize(this.params.per_page, res.data.total); 
						if(res.data.total<8){
							this.mescroll.endUpScroll(false)
						}
						// if(res.data.total==0){
						// 	this.mescroll.showEmpty();
						// }
					}
				})
			},
			saveHeadImgFile() {
			    let base64 = this.info.qrcode;
			    const bitmap = new plus.nativeObj.Bitmap("test");
			    bitmap.loadBase64Data(base64, function() {
			        const url = "_doc/" + new Date().getTime() + ".png";  // url为时间戳命名方式
			        console.log('saveHeadImgFile', url)
			        bitmap.save(url, {
			            overwrite: true,  // 是否覆盖
			            // quality: 'quality'  // 图片清晰度
			        }, (i) => {
			            uni.saveImageToPhotosAlbum({
			                filePath: url,
			                success: function() {
			                    uni.showToast({
			                        title: '图片保存成功',
			                        icon: 'none'
			                    })
			                    bitmap.clear()
			                }
			            });
			        }, (e) => {
			            uni.showToast({
			                title: '图片保存失败',
			                icon: 'none'
			            })
			            bitmap.clear()
			        });
			    }, (e) => {
			        uni.showToast({
			            title: '图片保存失败',
			            icon: 'none'
			        })
			        bitmap.clear()
			    });
			}
			
		}
	}
</script>

<style lang="scss" scoped>
page{
	background-color: #d32a00;
}
.user_inviter_index{
	.inviter_top{
		// background: url('../../../static/inviter/inviter_bg.png');
		background-size: 100%;
		height: 560rpx; 
		box-sizing: border-box;
	}
	.inviter_users{
		margin-top: 80rpx;
		.title{
			text-align: center;
			color:#fff;
			font-size: 40rpx;
			margin-bottom: 20rpx;
		}
		.item{
			box-sizing: border-box;
			padding: 20rpx 20rpx;
			width: 95%;
			margin:0 auto;
			box-shadow: 1px 2px 5px rgba(136, 24, 28, 0.1);	
			.avatar{
				width: 60rpx;
				height: 60rpx;
				border:50%;
				display: block;
				background-color: #fff;
				border-radius:50%;
				float: left;
				margin-right: 15rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius:50%;
				}
			}
			.nickname{
				color:#fff;
				float: left;
				line-height: 60rpx;
			}
			.money{
				float: right;
				line-height: 60rpx;
				color:#ffff7f
			}
			&:after{
				content:'';
				display: block;
				clear: both;
			}
		}
	}
	.w_block{
		background-color: #fff;
		width: 90%;
		border-radius: 8rpx;
		margin:0 auto;
		padding: 40rpx;
		box-sizing: border-box;
		.qrcode{
			width: 300rpx;
			height: 300rpx;
			background-color: #efefef;
			margin:0 auto;
			border-radius: 8rpx;
			margin-bottom: 40rpx;
			image{
				width: 300rpx;
				height: 300rpx;
				border-radius: 8rpx;
			}
		}
	}
	.btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 320rpx;
		height: 60rpx;
		margin: 0rpx auto;
		font-size: $uni-font-size-base;
		color: #fff;
		background-color: #ea1f22;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 40, 43, 0.4);	
	}
}

</style>
